
var Content=React.createClass({
	getInitialState:function(){
		return {
			collection:[],
			order:'desc',
			q:'',
			source:''
		}
	},
	componentDidMount:function(){
		$('#wrapper').unbind('scroll').bind('scroll',function(){
			var scrollTop = $('#wrapper').scrollTop();
			var scrollHeight = $('#wrapper>div').height();
			var windowHeight = $('#wrapper').height();
			if(scrollTop + windowHeight>=scrollHeight-50){
				this.loadMore()
			}
		}.bind(this));
		this.loadMore()
	},
	loadMore:function(){
		if(!this.isLoading && !this.complete){
			var collection=this.state.collection,
				order=this.state.order,
				q=this.state.q,
				source=this.state.source,
				last=_.last(collection);

			this.isLoading=true;
			$.ajax({
				url:'/me/walls/'+wallId+'/users?count=12'+'&order='+order+'&q='+q+'&source='+source+(last?'&type=old&since='+last.timestamp:''),
				dataType:'json',
				success:function(data){
					if(data.length){
						this.setState({
							collection:_.union(collection,data)
						});
					}else{
						this.complete=true
					}
					this.isLoading=false
				}.bind(this)
			})
		}
	},
	changeSortType:function(){
		var self=this,
			order=this.state.order;

		this.setState({
			order:(order=='desc'?'asc':'desc'),
			collection:[]
		},function(){
			self.complete=false;
			self.loadMore()
		})
	},
	searchUser:function(e){
		if(e.type=='keypress' && e.charCode!=13){
			return
		}
		var self=this,
			q=e.value!=undefined ? e.value : e.target.value;

		this.setState({
			q:q,
			collection:[]
		},function(){
			self.complete=false;
			self.loadMore()
		})
	},
	changeSource:function(e){
		var self=this,
			source=e.target.value;
		
		if(source!=this.state.source){
			this.setState({
				source:source,
				collection:[]
			},function(){
				self.complete=false;
				self.loadMore()
			})
		}
	},
	render:function(){
		var options=this.props.options,
			socialAccount=options.socialAccount,
			collection=this.state.collection,
			order=this.state.order;
        
		return (
			<div>
				<section className="content-header">
					<h1>{i18next.t('uesr_list.list')}<small>{socialAccount.name}</small><a className="pull-right" href="/console">{i18next.t('uesr_list.return')}</a></h1>
				</section>
				<div className="content">
					<ListTools changeSortType={this.changeSortType} searchUser={this.searchUser} changeSource={this.changeSource} order={order} />
		            {collection.length?<div className="row">
		                <div className="col-md-12">
		                    {collection.map(function(i,index){
		                    	return <UserCard key={index} data={i} />
		                    })}
		                </div>
		            </div>:<div className="photolist-empty">
						<i className="fa fa-user"></i><br></br>
						{i18next.t('uesr_list.no_user')}
					</div>}
		        </div>
	        </div>
		)
	}
});

var ListTools = React.createClass({
	render:function(){
		var order=this.props.order,
			changeSortType=this.props.changeSortType,
			changeSource=this.props.changeSource,
			searchUser=this.props.searchUser,
			search=this.refs.search;

		return (
			<div className="box-header form-inline">
				<div className="form-group" style={{margin:'0'}}>
					<div className="input-group">
						<input type="text" className="form-control" ref="search" placeholder= {i18next.t('uesr_list.search_user')} onKeyPress={searchUser} />
						<span className="input-group-addon" onClick={function(){searchUser(search)}}><i className="fa fa-search"></i></span>
					</div>
				</div>
				<div className="form-group pull-right" style={{margin:'0 0 0 10px'}}>
					<select className="form-control" onChange={changeSource}>
						<option value="">{i18next.t('uesr_list.all_sources')}</option>
						<option value="wechat">{i18next.t('uesr_list.wechat')}</option>
						<option value="dianping" style={{display:'none'}}>{i18next.t('uesr_list.dianping')}</option>
						<option value="other">{i18next.t('uesr_list.other')}</option>
					</select>
				</div>
				<button type="button" className="btn btn-default btn-lg btnnStyle pull-right" data-toggle="modal"  onClick={changeSortType}>
					{i18next.t('uesr_list.registration_date')} {order=='desc'?'↓':'↑'}
				</button>
			</div>
		)
	}
});

var UserCard=React.createClass({
	getInitialState:function(){
		return {
			isAdmin:this.props.data.is_admin,
            isAuthor: this.props.data.is_author
		}
	},
	sourceName:{
		wechat: i18next.t('uesr_list.wechat'),
		weibo: i18next.t('uesr_list.microblog'),
		dianping: i18next.t('uesr_list.dianping'),
		pc: i18next.t('uesr_list.pc'),
		other: i18next.t('uesr_list.other')
	},
	promote:function(){
		var id=this.props.data.id;
		$.ajax({
			type:'post',
			url:'/me/walls/'+wallId+'/administrators',
			data:{user_id:id},
			dataType:'json',
			success:function(data){
				if(data.success){
					this.setState({
						isAdmin:true,
						isAuthor:false
					})
				}
			}.bind(this)
		})
	},
	demote:function(){
		var id=this.props.data.id;
		$.ajax({
			type:'delete',
			url:'/me/walls/'+wallId+'/administrators/'+id,
			dataType:'json',
			success:function(data){
				if(data.success){
					this.setState({
						isAdmin:false
					})
				}
			}.bind(this)
		})
	},
	add_author: function(){
        var id = this.props.data.id;
        $.ajax({
            type: 'post',
            url: '/me/walls/'+wallId+'/administrators?role=author',
            data:{user_id:id},
            dataType: 'json',
            success: function(data){
            	if(data.success){
	            	this.setState({
			           isAuthor:true,
			           isAdmin:false
			        })
			    }
            }.bind(this),
            error: function(error){
                console.log(error)
            }
        })
    },
    cancle_author: function(){
        var id=this.props.data.id;
		$.ajax({
			type:'delete',
			url:'/me/walls/'+wallId+'/administrators/'+id+'?role=author',
			dataType:'json',
			success:function(data){
				if(data.success){
					this.setState({
						isAuthor:false
					})
				}
			}.bind(this)
		})
    },
	refresh:function(){
		var data=this.props.data;

		$("[data-toggle='tooltip']").tooltip()
	},
	render:function(){
		var data=this.props.data,
			isAdmin=this.state.isAdmin,
            isAuthor = this.state.isAuthor;

		return (
			<div className={(isAdmin||isAuthor?"user_item "+(isAdmin?"admin_item":"author_item"):"user_item")+" col-lg-3 col-md-4 col-sm-6 col-xs-12"}>
				<div className="box box-widget widget-user">
					<div className="widget-user-header bg-aqua-active">
						<h4>{data.name}</h4>
					</div>
					<div className="widget-user-image">
						<img className="img-circle" src={data.profile_image} alt="User Avatar" />
					</div>
					<div className="box-footer">
						<p>{i18next.t('uesr_list.source')}：{this.sourceName[data.source || 'other']}</p>
						<p>{i18next.t('uesr_list.address')}：{data.location.province} {data.location.city}</p>
						<p>{i18next.t('uesr_list.date')} ：{moment(data.timestamp).format(i18next.t('time.date_format'))}</p>
					</div>
					<div className="box-footer">
						{isAdmin?<div className="btn btn-flat btn-danger pull-right" onClick={this.demote}>{i18next.t('uesr_list.revocation_administrator')}</div>:<div className="btn btn-flat btn-default pull-right" data-placement="bottom" data-toggle="tooltip" onMouseLeave={this.refresh}  title={i18next.t('uesr_list.admin_title')} onClick={this.promote}>{i18next.t('uesr_list.as_administrator')}</div>}
						
                        {isAuthor? <div className="btn btn-flat btn-danger pull-left" onClick={this.cancle_author}>{i18next.t('uesr_list.revocation_author')}</div> : <div className="btn btn-flat btn-default pull-left" onClick={this.add_author}>{i18next.t('uesr_list.as_author')}</div> }
                    </div>
				</div>
			</div>
		)
	}
});
